<template>
	<view class="Address-management">
		<uni-swipe-action v-if="AddressData.length > 0">
			<uni-swipe-action-item v-for="(item, index) in AddressData" :key="index" :disabled="isDefault(item, index)"
				@click="deleteAddress(item.address_id, item.user_id)">
				<view class="Address-card">
					<view class="addressee">
						<view>
							<text class="name">{{ item.consignee }}</text>
							<text class="number">{{ item.address_phone }}</text>
						</view>
						<image src="@/static/myself/modifyIcon.png" mode="aspectFit"
							@click="goToAddAddress(item.address_id, item.user_id)"></image>
					</view>
					<view class="address-default">
						<text class="default-label" v-if="item.if_default == 0">默认</text>
						<text class="default" v-else></text>
						<text class="address">{{ item.address_area }}{{ item.address_content }}</text>
					</view>
				</view>
				<!-- 自定义滑动操作按钮 -->
				<template v-slot:right>
					<view class="swipe-action-button" @click="deleteAddress(item.address_id, item.user_id)">
						<uni-icons type="trash" size="24" color="#fff"></uni-icons>
					</view>
				</template>
			</uni-swipe-action-item>
		</uni-swipe-action>
		<view class="isNull" v-else>
			<image src="https://img.js.design/assets/img/66dafcd4c3154e41040205f2.png#04f07b62b993fbf1a7b059a3602a32e4"
				mode=""></image>
			<text>暂无收货地址点击下方按钮添加地址吧！</text>
		</view>
		<FooterButtonVue butText="添加收货地址" @click="goToAddAddress"></FooterButtonVue>
	</view>
</template>

<script setup>
	import FooterButtonVue from './components/FooterButton.vue';
	import uniIcons from '@/uni_modules/uni-icons/components/uni-icons/uni-icons.vue';
	import {
		ref
	} from 'vue';
	import {
		onShow
	} from '@dcloudio/uni-app';
	import {
		getAddress,
		DelAddress
	} from '@/config/API/address.js';

	const AddressData = ref([]);
	const userInfo = ref(uni.getStorageSync('userInfo'));

	onShow(async () => {
		try {
			const res = await getAddress(userInfo.value.id);
			if (res.data) {
				AddressData.value = res.data.sort((a, b) => a.if_default - b.if_default);
				console.log('AddressData.value', AddressData.value);
			} else {
				console.log('用户地址数据为空');
			}
		} catch (error) {
			console.error('获取地址数据出错：', error);
		}
	});

	// 判断是否禁用滑动删除
	const isDefault = (item, index) => {
		if (item.if_default === 0 && index === AddressData.value.findIndex(Address => Address.if_default === 0)) {
			return true;
		}
		return false;
	};

	// 删除地址
	const deleteAddress = async (addressid, userid) => {
		try {
			const res = await DelAddress(addressid, userid);
			console.log('Delres', res);
			if (res.msg == '地址信息删除成功') {
				AddressData.value = AddressData.value.filter(item => item.address_id !== addressid);
				uni.showToast({
					title: '地址删除成功',
					icon: 'success',
				});
			} else {
				uni.showToast({
					title: '删除失败',
					icon: 'none',
				});
			}
		} catch (error) {
			console.error('删除出错：', error);
		}
	};

	// 跳转到添加地址页面
	const goToAddAddress = (address_id, userid) => {
		console.log('跳转到添加地址页面');
		uni.navigateTo({
			url: `/myselfSubpages/MyAddress/addAddress?address_id=${address_id}&userid=${userid}`
		});
	};
</script>

<style lang="scss" scoped>
	.Address-management {
		width: 100%;
		min-height: 100vh;
		padding: 10rpx 30rpx 180rpx 30rpx;
		box-sizing: border-box;

		.Address-card {
			width: 100%;
			display: flex;
			flex-direction: column;
			gap: 20rpx;
			padding: 30rpx 0;
			border-bottom: 2rpx solid #eeeeee;

			.addressee {
				display: flex;
				justify-content: space-between;
				align-items: center;
				gap: 40rpx;

				text {
					font-size: 28rpx;
					font-weight: 400;
					color: rgba(51, 51, 51, 1);
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 1;
					overflow: hidden;
					text-overflow: ellipsis;
				}

				view {
					display: flex;
					align-items: center;
					gap: 40rpx;

					.name {
						max-width: 200rpx;
					}

					.number {
						max-width: 500rpx;
					}
				}
			}

			.address-default {
				display: flex;
				align-items: baseline;
				gap: 40rpx;

				.default {
					background-color: #fff;
					width: 60rpx;
					height: 30rpx;
				}

				.default-label {
					background-color: #000;
					color: #fff;
					font-size: 20rpx;
					font-weight: 400;
					padding: 0rpx 10rpx;
					box-sizing: border-box;
					border-radius: 4rpx;
					white-space: nowrap;
					height: 30rpx;
					line-height: 30rpx;
				}

				.address {
					color: rgba(102, 102, 102, 1);
					font-size: 28rpx;
					font-weight: 400;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 3;
					overflow: hidden;
					text-overflow: ellipsis;
				}
			}

			image {
				width: 28rpx;
				height: 28rpx;
			}
		}

		.isNull {
			width: 100%;
			height: 60vh;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			gap: 30rpx;

			image {
				width: 400rpx;
				height: 400rpx;
			}

			text {
				color: rgba(153, 153, 153, 1);
			}
		}

		.swipe-action-button {
			width: 100rpx;
			height: 100rpx;
			background-color: #c7121e;
			border-radius: 50%;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}
</style>